<template>
  <a-form-item
    hide-label
    :field="`conditions[${rowIndex}].field`"
    validate-trigger="blur"
    :rules="{ required: true, message: '请选择匹配字段' }">
    <div class="flex gap-x-8 w-full">
      <a-select
        v-model="modelValue"
        :options="configStore.fieldOptions"
        @change="handleFieldChange">
      </a-select>

      <a-form-item
        v-if="currentField?.field?.need_custom_field"
        hide-label
        :field="`conditions[${rowIndex}].customValue`"
        validate-trigger="blur"
        :rules="{ required: true, message: '请输入自定义参数' }">
        <a-input
          v-model="customValue"
          :placeholder="
            currentField?.field?.custom_field_example ?? ''
          "></a-input>
      </a-form-item>
    </div>
  </a-form-item>
</template>

<script lang="ts" setup>
import type { WafConditionItem } from '@/apis/model/waf'
import { useConfigStore } from '@/stores/config'

interface IProps {
  field: string
  operator: string
  rowIndex: number
  init: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  rowIndex: 0
})
const emits = defineEmits(['field-change'])
const modelValue = defineModel<string | undefined>({
  required: true
})
const customValue = defineModel<string | undefined>('customValue', {
  required: true
}) // 自定义字段
const configStore = useConfigStore()

// 当前行字段信息
const currentField = computed(() => {
  const list = configStore.conditionQuery as WafConditionItem[]
  const cField = list.find((item) => item.field?.field === props.field)
  return cField
})

const handleFieldChange = () => {
  emits('field-change')
}
</script>
